<template>
  <div class="ke">
    <div class="powertop">
		<!-- <router-link class="powertopli " to="/finance/onlinecommission">原佣金收入</router-link> -->
      <router-link class="powertopli " to="/yongjin/yongjinwai" v-if="checkquanxian('V0102').length > 0">佣金收入管理</router-link>

      <!-- <router-link class="powertopli " to="/yongjin/yongjinnei">系统内佣金收入</router-link> -->
      <router-link class="powertopli " to="/yongjin/yongjinchaxun" v-if="checkquanxian('V0103').length > 0">佣金收入查询</router-link>
      <!-- <router-link class="powertopli " to="/finance/onlinecommission/tkshouru">提卡费收入</router-link> -->
      <router-link class="powertopli powertopact" to="/yongjin/yongjinbaobiao" >佣金收入报表</router-link>
    </div>
    <div v-loading='loading' style="padding: 20px;">
      <div class="kflexc">
        <el-select v-model="all.product_source" style="margin-right: 20px;" clearable filterable placeholder="请选择产品渠道">
            <el-option :label="item" :value="item" v-for="item in qudaolaiyuanlists" :key="item"></el-option>
          </el-select>
        </el-form-item>

        <el-button type="danger" round  style="margin-right: 20px;" @click="search()">检索</el-button>

        <el-button type="danger" round  style="margin-right: 20px;" @click="xiazai2()">导出信息</el-button>
      </div>
      <el-table :data="list" border style="width: 100%; margin: 20px 0;">

        <el-table-column align='center' prop='product_source' label="所属渠道"></el-table-column>
        <el-table-column align='center' prop='orders_money_sum' label="收入金额"></el-table-column>
        <el-table-column align='center' prop='success_count_sum' label="已匹配订单"></el-table-column>
        <el-table-column align='center' prop='error_count_sum' label="未匹配订单"></el-table-column>
        <el-table-column align='center' prop='success_money_sum' label="已匹配金额"></el-table-column>
        <el-table-column align='center' prop='error_money_sum' label="未匹配金额"></el-table-column>

        <!-- <el-table-column align='center' label="操作" width="300px">
          <template slot-scope="scope">
            <div class="kflexc">
              <div style="color: #409EFF; margin: 10px; cursor: pointer;" @click="xiazai2(scope.row)">下载明细</div>
            </div>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="all.page" @current-change="fanye" :page-size="all.page_size" :total="total"></el-pagination>
    </div>

  </div>
</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import moment from "moment";
  import {
  	provinceAndCityData,
  	CodeToText,
  	TextToCode
  } from 'element-china-area-data'
  import XLSX from 'xlsx';
  import {
      read,utils
    } from 'xlsx'

  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot
    },
    name: "ke",
    data() {
      return {
        log2:false,
        channel:[],
        citylist: provinceAndCityData,
        multipleSelection:[],
        times:[],
        loading:false,
        list:"",
        list2:"",
        all:{
          page:1,
          page_size:20,
          product_source:""
        },
        total:0,
        log:false,
        nowdateym:'',
        all2:{
          file:"",
          date:"",
          name:"",
          operator:"",
          channel:"",
          product_source:""
        },
        xuanzhong:{},
        jiaoyanlist:[],
        jiaoyanlog:false,
        qudaolaiyuanlists:[]
      }
    },
    created() {
      this.getlist()

      //获取运营商渠道
      axios.get('/api/plan-market/product/sources?page_size=2000')
        .then(response => {
          if (response.data.msg.code == 0) {
             this.qudaolaiyuanlists = response.data.data
          } else {
             this.$message.error(response.data.msg.info);
          }
      })
    },
    mounted() {

    },
    methods: {
      xiazai2:function(){
        axios.get('/api/plan-market/income2/files/prosource/exp',{params:this.all})
          .then(response => {
            if (response.data.msg.code == 0) {
              location.href = location.origin + '/' + response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      daochu:function(){
        axios.get('/api/plan-market/expend/merchant/form',{params:this.all})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //统计
      search: function() {
        this.all.page = 1
        this.getlist()
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.all.page = page
        this.getlist()
      },
      //获取列表
      getlist: function() {
        axios.get('/api/plan-market/income2/files/prosource',{params:this.all})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

    }
  }
</script>

<style lang="scss" scoped>
  .ke {
    .powertop {
    	display: flex;
    	background:#f9f9f9;
    }
    .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
    }
    .router-link-active {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--mini{ padding: 6px 15px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .team {
    	background: #F9F9F9;
    }
  }
</style>
